<template>
  <div class="dashboard">
    <!-- 时间筛选功能 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="grid-content">
          <el-date-picker
            v-model="selectedDate"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            @change="handleDateChange"
          />
        </div>
      </el-col>
    </el-row>
    <!-- 原有的图表内容 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="chart-frame">
          <h3>HXD1-5014A端故障统计</h3>
          <pie-chart :data="chartData1" />
        </div>
      </el-col>
      <el-col :span="12">
        <div class="chart-frame">
          <h3> HXD1-5014B端故障统计</h3>
          <pie-chart :data="chartData1" />
          <!-- Placeholder for the second pie chart -->
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <div class="chart-frame">
          <h3> HXD1-5014A端故障位置统计</h3>
          <pie-chart :data="chartData2" />
        </div>
      </el-col>
      <el-col :span="12">
        <div class="chart-frame">
          <h3> HXD1-5014B端故障位置统计</h3>
          <pie-chart :data="chartData2" />
          <!-- Placeholder for the fourth pie chart -->
        </div>
      </el-col>
    </el-row>

  </div>
</template>
<script>
import PieChart from './PieChart'

export default {
  components: { PieChart },
  data() {
    return {
      selectedDate: '', // 选中的日期范围
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      chartData1: [
        { name: '空压机及风源系统', value: 58.33, color: '#f28a2d' },
        { name: '制动机运行与制动性能故障', value: 41.67, color: '#ab7967' }
      ],
      chartData2: [
        { name: '空气制动系统', value: 58.33, color: '#f28a2d' },
        { name: '其它关键部件', value: 41.67, color: '#ab7967' }
      ]
    }
  },
  methods: {
    handleDateChange(value) {
      // 处理日期变化，可以根据选中的日期范围更新图表数据
      console.log('Selected date range:', value)
      // 这里可以调用方法来更新图表数据
    }
  }
}
</script>

<style scoped>
.dashboard .chart-frame {
  border: 1px solid #e4e7ed; /* 添加外框 */
  padding: 15px; /* 添加内边距 */
  border-radius: 4px; /* 圆角边框 */
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1); /* 添加阴影 */
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

/* 可以根据需要添加更多样式 */
</style>
